<template>
    <div class="app-container">
      <div v-if="$permission('stockInconformity:list')">
        <!-- 条件栏 -->
        <div class="filter-wrapper">
          <new-page-filter
            v-model:query="filterInfo.query.queryMap"
            :queryMoreJson="false"
            :filter-list="filterInfo.searchList"
            :filter-btn="filterInfo.searchBtn"
          >
          </new-page-filter>
        </div>
        <!-- 表格 -->
        <table-container
          :refresh="tableInfo.refresh"
          :init-curpage="tableInfo.initCurpage"
          v-model:data="tableInfo.data"
          :api="tableInfo.api"
          :query="filterInfo.query"
          :checkBox="false"
          :tabIndex="true"
          :field-list="tableInfo.fieldList"
          :handle="tableInfo.handle"
          :row-class-name="tableRowClassOtherName"
        >
          <template v-slot:col-smartCabinetDepotName="scope">
            <span
              :style="
                scope.row.smartCabinetDepotName !== scope.row.stockDepotName
                  ? 'color: #ec808d'
                  : ''
              "
              >{{ scope.row.smartCabinetDepotName }}</span
            >
          </template>
          <template v-slot:col-stockDepotName="scope">
            <span
              :style="
                scope.row.smartCabinetDepotName !== scope.row.stockDepotName
                  ? 'color: #ec808d'
                  : ''
              "
              >{{ scope.row.stockDepotName }}</span
            >
          </template>
          <template v-slot:col-smartCabinetQty="scope">
            <span
              :style="
                scope.row.smartCabinetQty !== scope.row.stockQty
                  ? 'color: #ec808d'
                  : ''
              "
              >{{ $fn.qtyFormatter(scope.row.smartCabinetQty) }}</span
            >
          </template>
          <template v-slot:col-stockQty="scope">
            <span
              :style="
                scope.row.smartCabinetQty !== scope.row.stockQty
                  ? 'color: #ec808d'
                  : ''
              "
              >{{ $fn.qtyFormatter(scope.row.stockQty) }}</span
            >
          </template>
        </table-container>
      </div>
      <IndividualDetails
        v-if="individualDetailsInfo.visible"
        v-model:showDialog="individualDetailsInfo.visible"
        :rfidCode="individualDetailsInfo.rfidCode"
      />
    </div>
  </template>
  
  <script setup name="InventoryDuty">
  import { getDiffList } from '@/api/smartCabinet'
import { onMounted } from 'vue'
  import IndividualDetails from './individualDetails'
  
  const { proxy } = getCurrentInstance()
  // 过滤相关配置
  const filterInfo = ref({
    query: {
      
    },
    searchList: [
        {
            componentType: 'input',
            label: '产品名称',
            value: 'commonName',
            event: search,
        },
    ],
    searchBtn: [
      { type: 'button', label: '搜索', event: search },
    ],
    btnList: [],
  })
  
  // 表格相关
  const tableInfo = ref({
    refresh: 1,
    initCurpage: 1,
    api: undefined,
    data: [
        
    ],
    fieldList: [
        {
        label: '产品名称',
        value: 'commonName',
        },
        {
        label: '产品编码',
        value: 'productCode',
        },
    ],
    handle: {
      fixed: 'right',
      label: '操作',
      width: '90',
      btList: [
        {
            label: '个体详情',
            event: showDetail,
            show: proxy.$permission('InventoryDuty:IndividualDetails'),
        },
      ],
    },
  })

  const individualDetailsInfo = ref({
    visible: false,
    rfidCode: '',
  })
  onMounted(() => {
    getList()
  })
  function showDetail(row) {
    //操作流水对比
    sessionStorage.setItem('storeRowId', row.id)
    individualDetailsInfo.value.visible = true
    individualDetailsInfo.value.rfidCode = row.rfidCode
  }  
  // 获取列表
  function getList() {
    tableInfo.value.api = getDiffList
    tableInfo.value.refresh = Math.random()
  }
  // 搜索
  function search() {
    // 重置分页
    tableInfo.value.api = getDiffList
    tableInfo.value.initCurpage = Math.random()
    tableInfo.value.refresh = Math.random()
  }
  
  function tableRowClassOtherName({ row }) {
    let rowId = sessionStorage.getItem('storeRowId')
    if (rowId && row.id === Number(rowId)) {
      return 'check-row'
    }
    return ''
  }

  
  
  

  </script>
  
  <style scoped></style>
  